<template>
  <view class="contain-box">
    <view class="header-box">
      <view class="left">
        <view class="head-img">
          <u-image width="70rpx" height="70rpx" border-radius="35rpx"
            src="https://guet-lab.oss-cn-hangzhou.aliyuncs.com/api/2023/12/14/b15f3e06-4175-494a-9a81-8ed0b47ae87b.png"></u-image>
        </view>
        <view class="info">
          <view class="name">
            {{article_info.username}}
          </view>
          <view class="tip">
            {{article_info.title}}
          </view>
        </view>
      </view>
      <view class="right">
        <view class="btn" @click="focusIt">
          <u-icon name="plus" color="#FFFFFF" v-if='!hasFocus'></u-icon>
          <u-icon name="checkmark" color="#FFFFFF" v-else></u-icon>
          <span class="text" v-if='!hasFocus'>
            关注
          </span>
          <span class="text" v-else>
            已关注
          </span>
        </view>
      </view>
    </view>
    <view class="main-text">
      {{article_info.content}}
    </view>
    <view class="img-list-box" v-if="article_info.imageUrlList.length>0">
      <view class="row-box" v-if="article_info.imageUrlList.length>0"
        v-for="(item, index) in getImgList(article_info.imageUrlList)" :key="index">
        <view class="column-box" v-for="(bitem, bindex) in item" :key="bindex">

          <view class="img-single">
            <u-image width="100%" height="100%" border-radius="10rpx" :src="bitem"
              @click="previewImage(bindex)"></u-image>
          </view>
        </view>
        <view class="column-box" v-if="" v-for="(citem, cindex) in (3 - item.length)" :key="cindex">
          <view class="img-single">
          </view>
        </view>
      </view>
    </view>
    <view style="clear: both;"></view>
    <view class="handle-box">
      <view @click="likeIT">
        <span class="label">
          <u-icon name="thumb-up" v-if='!hasLike'></u-icon>
          <u-icon name="thumb-up-fill" v-else></u-icon>
        </span>
        <span v-if='!hasLike'>
          点赞 ({{likeNum}})
        </span>
        <span v-else>
          已点赞 ({{likeNum}})
        </span>
      </view>
      <view @click="collectIt">
        <span class="label">
          <u-icon name="star" v-if='!hasCollect'></u-icon>
          <u-icon name="star-fill" v-else></u-icon>
        </span>
        <span v-if='!hasCollect'>
          收藏 ({{collectNum}})
        </span>
        <span v-else>
          已收藏 ({{collectNum}})
        </span>
      </view>
      <view>
        <span class="label">
          <u-icon name="moments"></u-icon>
        </span>
        <span>
          分享
        </span>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    name: "article_box",
    props: {
      article_info: {
        type: Object,
        default: {
          id: 0,
          username: '白杨树',
          time: '01-15 20:37',
          machine: 'iPhone 12 Pro Max',
          content: '这里说的图片图标，指的是小图标，起作用定位为"icon"图标作用，而非大尺寸的图片展示场景，理论上，这个小图标应该为png格式的正方形图标。',
          imageUrlList: [

          ],
          collectNum: 321,
          likeNum: 999
        }
      }
    },
    data() {
      return {
        iconThumb: 'thumb-up',
        likeNum: 0,
        collectNum: 0,
        collectId: 0,
        likeId: 0,
        hasLike: false,
        hasCollect: false,
        hasFocus: false,
        iconThumb_full: 'thumb-up-fill',
        likeId: 0,
        userimg: '',
      };
    },
    created() {
      // 在 mounted 钩子函数中读取 article_info
      this.likeNum = this.article_info.likeNum
      this.likeId = this.article_info.likeId
      this.getSigleItem()
      // console.log('Component mounted with article information:', this.article_info);
    },
    methods: {
      previewImage(index) {
        uni.previewImage({
          urls: this.article_info.imageUrlList,
          current: index,
          indicator: this.currentIndicator,
          loop: this.isLoop
        })
      },

      async addfocus() {
        try {
          const response = await uni.$http.post(
            `/photo/focus?focusUserId=${this.article_info.pUserId}&userId=${uni.getStorageSync('userid')}`);
          console.log("关注", response.data);
        } catch (error) {
          console.error('请求失败:', error);
          uni.showToast({
            title: '请求失败，请稍后重试',
            icon: 'none'
          });
        }
      },
      async oddfocus() {
        try {
          const response = await uni.$http.post(
            `/photo/focus/cancel?focusUserId=${this.article_info.pUserId}&userId=${uni.getStorageSync('userid')}`);
          console.log("取消关注", response.data);
        } catch (error) {
          console.error('请求失败:', error);
          uni.showToast({
            title: '请求失败，请稍后重试',
            icon: 'none'
          });
        }
      },
      async addcollect() {
        try {
          const response = await uni.$http.post(
            `/photo/collect?shareId=${this.article_info.id}&userId=${uni.getStorageSync('userid')}`);
          console.log("收藏", response.data);
        } catch (error) {
          console.error('请求失败:', error);
          uni.showToast({
            title: '请求失败，请稍后重试',
            icon: 'none'
          });
        }
      },
      async oddcollect() {
        try {
          const response = await uni.$http.post(
            `/photo/collect/cancel?collectId=${this.collectId}`);
          console.log("取消收藏", response.data);
        } catch (error) {
          console.error('请求失败:', error);
          uni.showToast({
            title: '请求失败，请稍后重试',
            icon: 'none'
          });
        }
      },
      async addLike() {
        try {
          const response = await uni.$http.post(
            `/photo/like?shareId=${this.article_info.id}&userId=${uni.getStorageSync('userid')}`);
          console.log("点赞", response.data);
        } catch (error) {
          console.error('请求失败:', error);
          uni.showToast({
            title: '请求失败，请稍后重试',
            icon: 'none'
          });
        }
      },
      async oddLike() {
        try {
          const response = await uni.$http.post(
            `/photo/like/cancel?likeId=${this.likeId}`);
          console.log("取消点赞", response.data);
        } catch (error) {
          console.error('请求失败:', error);
          uni.showToast({
            title: '请求失败，请稍后重试',
            icon: 'none'
          });
        }
      },
      async getSigleItem() {
        try {
          const response = await uni.$http.get(
            `/photo/share/detail?shareId=${this.article_info.id}&userId=${uni.getStorageSync('userid')}`);
          // console.log("详情", response.data);
          if (response.data.data.likeNum) this.likeNum = response.data.data.likeNum
          this.likeId = response.data.data.likeId
          if (response.data.data.collectNum) this.collectNum = response.data.data.collectNum
          this.hasLike = response.data.data.hasLike
          this.hasCollect = response.data.data.hasCollect
          this.hasFocus = response.data.data.hasFocus
          this.collectId = response.data.data.collectId
        } catch (error) {
          console.error('请求失败:', error);
          uni.showToast({
            title: '请求失败，请稍后重试',
            icon: 'none'
          });
        }
      },
      collectIt() {
        if (this.hasCollect) this.oddcollect()
        else this.addcollect()
        this.getSigleItem()
      },
      focusIt() {
        if (this.hasFocus) this.oddfocus()
        else this.addfocus()
        this.getSigleItem()
      },
      likeIT() {
        if (this.hasLike) {
          this.oddLike()
        } else {
          this.addLike()
        }
        this.getSigleItem()
      },
      getImgList(list) {
        let newList = [
          []
        ]
        for (let i = 0; i < list.length; i++) {
          newList[newList.length - 1].push(list[i])
          if ((i + 1) % 3 == 0) {
            newList.push([])
          }
        }
        // console.log('数组', newList)
        return newList
      },

    }
  }
</script>

<style lang="scss" scoped>
  .contain-box {
    color: #222222;
    padding: 20rpx;
    background-color: #FFFFFF;

    .header-box {
      display: flex;

      .left {
        flex: 1;
        display: flex;
        align-items: center;

        .head-img {
          width: 70rpx;
          height: 70rpx;
          border-radius: 50%;

          image {
            width: 70rpx;
            height: 70rpx;
            border-radius: 50%;
          }
        }

        .info {
          margin-left: 15rpx;

          .name {
            font-size: 32rpx;
            font-weight: 550;
            margin-bottom: 10rpx;
          }

          .tip {
            font-size: 23rpx;
            color: #bfbfbf;
          }
        }

      }

      .right {
        display: flex;
        align-items: center;

        .btn {
          color: #FFFFFF;
          background: linear-gradient(to right, #FF623E, #FCBC27);
          height: 50rpx;
          border-radius: 25rpx;
          font-size: 25rpx;
          display: flex;
          align-items: center;
          padding: 0 20rpx;

          .text {
            margin-left: 8rpx;
          }
        }
      }
    }

    .main-text {
      margin-top: 20rpx;
      margin-bottom: 20rpx;
      font-size: 26rpx;
      font-weight: 500;
      color: #222222;
    }

    .img-list-box {
      .row-box {
        display: flex;
        justify-content: space-between;
        margin-bottom: 2vw;

        .column-box {
          display: flex;

          .img-single {
            width: 30vw;
            height: 30vw;
          }
        }
      }
    }

    .handle-box {
      display: flex;
      border-top: 1px solid #f2f2f2;
      padding-top: 20rpx;

      view {
        flex: 1;
        display: flex;
        justify-content: center;
        align-items: center;

        .label {
          margin-right: 10rpx;
        }
      }
    }
  }
</style>